import '../../assets/sass/home_page/Homes/Homes.css'
import React, { constructor, useRef, useState,useEffect } from 'react'
import { DownOutlined, SearchOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, Space, Typography, Input, Tooltip, Button, Carousel } from 'antd';
import Tables from '../../component/Tab_name/Swiper_one';
// import { data } from 'autoprefixer';
function Shou(this: any) {
const items: MenuProps['items'] = [
  {
    key: '1',
    label: 'Item 1',
  },
  {
    key: '2',
    label: 'Item 2',
  },
  {
    key: '3',
    label: 'Item 3',
  },
];
const list: any = [
  {
    tos: '精选推荐'
  },
  {
    tos: '热点关注'
  },
  {
    tos: '儿童节'
  },
  {
    tos: '高考加油'
  },
  {
    tos: '端午节'
  },
]
const data2:any=[
  {
        path:"/src/assets/image/home_page/side_menu/changtu.png",
        clasname:'box_img',
        h5:'星光之夜极简时尚商务科技活动邀请函'

      },
      {
        path:"/src/assets/image/home_page/side_menu/changtu.png",
        clasname:'box_imgs',
        clasnames:'box_imges',
        clasnamese:'box_imgess',
        h5:'星光之夜极简时尚商务科技活动邀请函'

      },
      {
        paths:"/src/assets/image/home_page/side_menu/正经视频8.mp4",
        clasname:'box_imgs',
        clasnames:'box_imge_sp',
        h5:'星光之夜极简时尚商务科技活动邀请函'

      },
      {
        path:"/src/assets/image/home_page/side_menu/changtu.png",
        clasname:'box_imgs',
        clasnames:'box_imges',
        clasnamese:'box_imgess',
h5:'星光之夜极简时尚商务科技活动邀请函'
      },
       {
        paths:"/src/assets/image/home_page/side_menu/正经视频5.mp4",
        clasname:'box_imgs',
        clasnames:'box_imge_sp',
        h5:'星光之夜极简时尚商务科技活动邀请函'
      },
       {
        path:"/src/assets/image/home_page/side_menu/changtu.png",
        clasname:'box_img',
        h5:'星光之夜极简时尚商务科技活动邀请函'
      },
]
const data:any=[
       {
        path:"/src/assets/image/home_page/side_menu/a1.png",
        clasname:'box_img1'
      },
      {
        path:"/src/assets/image/home_page/side_menu/a2.png",
         clasname:'box_img1'
      },
      {
       path:"/src/assets/image/home_page/side_menu/a3.png",
        clasname:'box_img1'
      },
      {
        path:"/src/assets/image/home_page/side_menu/a4.png",
         clasname:'box_img1'
      },
       {
        path:"/src/assets/image/home_page/side_menu/a5.png",
         clasname:'box_img1'
      },
       {
        path:"/src/assets/image/home_page/side_menu/a6.png",
         clasname:'box_img1'
      },
       {
        path:"/src/assets/image/home_page/side_menu/a7.png",
         clasname:'box_img1'
      },
       {
        path:"/src/assets/image/home_page/side_menu/a7.png",
         clasname:'box_img1'
      },
]
  return (
    <div className='main'>
      <div className='top'>
        <div className='left'>
          <img src="/src/assets/image/home_page/side_menu/logo.png" alt="" style={{ width: "100%" }} />
        </div>
        <div className='center'>
          <div className='centername'>
            <Dropdown
              menu={{
                items,
                selectable: true,
                defaultSelectedKeys: ['3'],
              }}
            >
              <Typography.Link>
                <Space style={{ width: "20%", height: "100%" }}>
                  全部
                  <DownOutlined />
                </Space>
              </Typography.Link>
            </Dropdown>
            <Input placeholder="Basic usage" style={{ width: "60%", height: "100%" }} />
            <Tooltip title="search">
              <Button className='btn' style={{ width: "20%", height: "100%", background: 'blue', color: '#fff' }} icon={<SearchOutlined />}></Button>

            </Tooltip>
          </div>
        </div>
        <div className='right'>
          <div className='rili'>
            <div className='zuo'>
              <p><i>21</i>/5 2024</p>
              <p>周二 农历四月十四</p>
            </div>
            <div className='you'>
              <img src="/src/assets/image/home_page/side_menu/下载.png" alt="" />世界无烟日
            </div>
          </div>
        </div>
      </div>
      <div className='swiper'>
        <Carousel arrows infinite={false}>
          <div className='swp_center'>
            <img src="/src/assets/image/home_page/side_menu/swpier.png" alt="" />
          </div>
          <div className='swp_center'>
            <img src="/src/assets/image/home_page/side_menu/swpier2.png" alt="" />
          </div>
          <div className='swp_center'>
            <img src="/src/assets/image/home_page/side_menu/swiper3.png" alt="" />
          </div>
        </Carousel>
      </div>
      <div className="xuanxiang">
        <Tables namesend={data}></Tables>
      </div>
      <div className='table_two'>
        <div className="top_two">
          <h2>今日推荐</h2>
          <p style={{ marginLeft: '30px', color: '#c79873' }}>开通会员免费用</p>

          {
            list.map((item: any, index: any) => (
              <div className='ulstwo' key={index}>  <p >{item.tos}</p>
              </div>))
          }
          <p className='ptwo'>查看更多&gt;</p>
        </div>
        <div className="top_three">
          <div className='three_left'>
            <div className='top_threes'>
              <div>
                <Button style={{ marginTop: '45px' }} type="primary" shape="circle">
                  +
                </Button>
                <h5 style={{ marginTop: '5px' }}>空白创建</h5>
              </div>
            </div>
            <div className='btn_threes'>
              <img src="/src/assets/image/home_page/side_menu/yingxiao.png" alt="" />
            </div>
            
          </div>
          
          <div className='three_right'>
                     <Tables namesend={data2}></Tables>
          </div>
        </div>
      </div>
       <div className='table_two'>
        <div className="top_two">
          <h2>今日推荐</h2>
          <p style={{ marginLeft: '30px', color: '#c79873' }}>开通会员免费用</p>

          {
            list.map((item: any, index: any) => (
              <div className='ulstwo' key={index}>  <p >{item.tos}</p>
              </div>))
          }
          <p className='ptwo'>查看更多&gt;</p>
        </div>
        <div className="top_three">
          <div className='three_rights'>
                     <Tables namesend={data2}></Tables>
          </div>
        </div>
      </div>
      <div className='table_two'>
        <div className="top_two">
          <h2>今日推荐</h2>
          <p style={{ marginLeft: '30px', color: '#c79873' }}>开通会员免费用</p>

          {
            list.map((item: any, index: any) => (
              <div className='ulstwo' key={index}>  <p >{item.tos}</p>
              </div>))
          }
          <p className='ptwo'>查看更多&gt;</p>
        </div>
        <div className="top_three">
          <div className='three_rights'>
                     <Tables namesend={data2}></Tables>
          </div>
        </div>
      </div>
      <div className='table_two'>
        <div className="top_two">
          <h2>今日推荐</h2>
          <p style={{ marginLeft: '30px', color: '#c79873' }}>开通会员免费用</p>

          {
            list.map((item: any, index: any) => (
              <div className='ulstwo' key={index}>  <p >{item.tos}</p>
              </div>))
          }
          <p className='ptwo'>查看更多&gt;</p>
        </div>
        <div className="top_three">
          <div className='three_rights'>
                     <Tables namesend={data2}></Tables>
          </div>
        </div>
      </div>
      <div className='guanggao'>
            <img src="/src/assets/image/home_page/side_menu/vip.png" alt="" />
      </div>
      <div className='btns'>
            <div className="btns_left">
© 2024 eqxiu.com. All rights reserved 北京中网易企秀科技有限公司
<br />
电信与信息服务业务经营许可证：京ICP证160037号 | 京ICP备15056244号 | 京公网安备11010802018300
            </div>
            <div className="btns_right">
                <img id='imgs' src="/src/assets/image/home_page/side_menu/pinpai.png" alt="" />
                <img src="/src/assets/image/home_page/side_menu/kexin.svg" alt="" />
            </div>
      </div>
    </div>
  )
}

export default Shou
